<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Lists WebUI 2.0</title>

<!--[if lt IE 9]>
      <script src="js/html5.js"></script>
    <![endif]-->



<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="css/prettify.css" rel="stylesheet" type="text/css">


<link href="css/webui.css" rel="stylesheet" type="text/css">

</head>

<body style="padding-top:90px;">
	<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="http://code.google.com/webui-framework">WebUI FrameWork</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="index.html">OverView</a></li>
              <li><a href="menus.html">Menus</a></li>
              <li><a href="lists.html">Lists</a></li>
              <li><a href="colors.html">Colors</a></li>
              <li><a href="forms.html">Forms</a></li>
              <li><a href="buttons.html">Tables</a></li>
              <li class="divider-vertical"></li>
              <li><a href="wedgits.html">Wedgits</a></li>
            </ul>
            <ul class="nav pull-right">
            	<li><a href="#">WelCome WebUI</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    
  <div class="container" >  
    <header class="margin20-b">
    	<h1>Tables （ WebUI FrameWork 2.0  ） <small>Smart Framework With Bootstrap</small>  </h1>
        <div class="menubar menubar-large  margin10-t">
        	<div class="container">	
                <ul class="menu pull-left">
                    <li><a href="#"><i class="icon-adjust"></i>&nbsp;Home&nbsp;</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">&nbsp;Pages</a></li>
                    <li><a href="#">About</a></li>
                    
                </ul>
                
                
				
                <ul class="menu pull-right">
            		<li><a href="#"><i class="icon-search"></i>&nbsp;查找&nbsp;</a></li>
           		 </ul> 
                 <form class="menubar-search pull-right"><input type="text" class="search-query" placeholder="查找"></form>           
            
            </div>
            
        </div>
        
    </header>
    
      <section id="varticalLists">
            <h2 class="page-header">普通列表展示 </h2>
            <div class="row margin20-b">
                <div class="span3">
                    <h2>BlogRoll</h2>
                        <ul class="vlist vlist-divide">
                            <li><a href="#">Documentation</a></li>
                            <li><a href="#">Plugins</a></li>
                            <li><a href="#">Suggest</a></li>
                            <li><a href="#">Support Forum</a></li>
                            <li><a href="#">Themes</a></li>
                            <li><a href="#">WordPress Blog</a></li>
                        </ul>
                </div>
                <div class="span3">
                    <h2>BlogRoll</h2>
                        <ul class="vlist divide">
                            <li><i  class="icon-book"></i> <a href="#">Documentation</a></li>
                            <li><i  class="icon-asterisk"></i> <a href="#">Plugins</a></li>
                            <li><i  class="icon-edit"></i> <a href="#">Suggest</a></li>
                            <li><i  class="icon-comment"></i> <a href="#">Support Forum</a></li>
                            <li><i  class="icon-fire"></i> <a href="#">Themes</a></li>
                        </ul>
                        
                </div>
                
                <div class="span3">
                    <h2>博客空间</h2>
                        <ul class="vlist">
                            <li><a href="#">我的文档</a><small>(15)</small></li>
                            <li><a href="#">插件</a><small>(8)</small></li>
                            <li><a href="#">建议</a><small>(21)</small></li>
                            <li><a href="#">支持论坛</a><small>(1)</small></li>
                            <li><a href="#">主题</a></li>
                            <li><a href="#">Wordpress博客</a></li>
                        </ul>
                </div>
                
                <div class="span3">
                        <h2>BlogRoll</h2>
                        <ul class="vlist vlist-dot font14">
                            <li><a href="#">Documentation</a></li>
                            <li><a href="#">Plugins</a></li>
                            <li><a href="#">Suggest</a></li>
                            <li><a href="#">Support Forum</a></li>
                            <li><a href="#">Themes</a></li>
                            <li><a href="#">WordPress Blog</a></li>
                        </ul>                             
                </div>
                    
            </div>
        
       </section>
       
       <section id="picList">
       		<h2 class="page-header">缩略图列表及边栏列表</h2>
       		<div class="row margin20-b">
            	<div class="span3">
                	<h2>BlogRoll</h2>
                    <ul class="vlist vlist-divide">
                    	<li>
                            <a href="#" class="thumb"><img src="img/demo/thumb1-small.jpg" /></a> 
                            <div class="text">
                            	<h5><a href="#">Leave me Alone</a> </h5>
                                <p>2011年12月 by Sind</p>
                            </div>
                           <div class="clearfix"></div>
                        </li>
                        <li>
                        		<a href="#" class="thumb"><img src="img/demo/thumb2-small.jpg"/></a> 
                            
                            <div class="text">
                            	<h5><a href="#">Sind's Documentation</a></h5>
                                <p class="gray-d1">2011年12月 by Sind</p>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                        <li>
                            <a href="#" class="thumb"><img src="img/demo/thumb3-small.jpg"/></a> 
                            
                            <div class="text">
                            	<h5><a href="#">Suggests For you</a></h5>
                                <p class="gray-d1">2011年12月 by arkon</p>
                            </div>
                            <div class="clearfix"></div>
                         </li>
                        <li>
                        	
                        		<a href="#" class="thumb"><img src="img/demo/thumb4-small.jpg" /></a> 
                            
                            <div class="text">
                            	<h5><a href="#">Never break your heart</a></h5s>
                                <p class="gray-d1">2011年12月 by sind</p>
                            </div>
                          
                            <div class="clearfix"></div>
                        </li>
                        <li>
                        	
                        		<a href="#" class="thumb"><img src="img/demo/thumb5-small.jpg"/></a> 
                           
                            <div class="text">
                            	<h5><a href="#">Show you the sheap of my heart</a></h5>
                                <p class="gray-d1">2011年12月 by sind</p>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                        
                    </ul>  
                </div>
                
                <div class="span3">
                	<h2>博客空间</h2>
                    
                    <ul class="list">
                   	    <li><a href="#" class="thumb"><img src="img/demo/thumb1-small.jpg"/></a><p>测试</p></li>
                        <li><a href="#" class="thumb"><img src="img/demo/thumb5-small.jpg"/></a><p>Test</p></li>
                        <li><a href="#" class="thumb"><img src="img/demo/thumb3-small.jpg"/></a><p>测试</p></li>
                        <li><a href="#" class="thumb"><img src="img/demo/thumb4-small.jpg"/></a><p>Test</p></li>
                        <li><a href="#" class="thumb"><img src="img/demo/thumb5-small.jpg"/></a><p>Pic1</p></li>
                        <li><a href="#" class="thumb"><img src="img/demo/thumb3-small.jpg"/></a><p>Pic2</p></li>
                        <li><a href="#" class="thumb"><img src="img/demo/thumb1-small.jpg"/></a><p>Pic3</p></li>
                        <li><a href="#" class="thumb"><img src="img/demo/thumb4-small.jpg"/></a><p>Pic4</p></li>
                    </ul>
                </div>
                
                
                <div class="span3">
                	<h2>博客空间</h2>
                    
                    <ul class="vlist vlist-divide">
                    	<li>
                            <a href="#" class="thumb"><img src="img/demo/thumb1.jpg"/></a> 
                            <div class="text">
                            	<h5><a href="#">Leave me Alone</a> </h5>
                                <p>2011年12月 by Sind</p>
                            </div>
                           <div class="clearfix"></div>
                        </li>
                        <li>
                        		<a href="#" class="thumb"><img src="img/demo/thumb3.jpg" /></a> 
                            
                            <div class="text">
                            	<h5><a href="#">Sind's Documentation</a></h5>
                                <p class="gray-d1">2011年12月 by Sind</p>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                        <li>
                            <a href="#" class="thumb"><img src="img/demo/thumb4.jpg"/></a> 
                            
                            <div class="text">
                            	<h5><a href="#">Suggests For you</a></h5>
                                <p class="gray-d1">2011年12月 by arkon</p>
                            </div>
                            <div class="clearfix"></div>
                         </li>
                        
                        
                    </ul>  
                </div>
                
                <div class="span3">
                	<h2>边栏列表</h2>
                    
                    <ul class="list">
                    
                   	    <div class="panel  margin10-b">
            			
                        
                        <div class="pcontent">
                            <ul class="list list-span3">
                                <li><a href="#">机密</a></li>
                				<li><a href="#">秘密</a></li>
                				<li><a href="#">内部</a></li>
                				<li><a href="#">公开</a></li>
                            </ul>
                        </div>
                        
                 		<footer></footer>
                        
                        <div class="divider margin20-b"></div>
                        
           		    	<div class="pcontent">
                        
                        
                            <ul class="list list-span2">
                                <li><a href="#">长期保存</a></li>
                                <li><a href="#">永久保存</a></li>
                                <li><a href="#">短期保存</a></li>
                                <li><a href="#">10年</a></li>
                                <li><a href="#">30年</a></li>
                            </ul>
                        </div>   
                        
                 		<footer ></footer>  
                        
                        <div class="divider margin20-tb"></div>
                        
           		    	<div class="pcontent">
                            <ul class="list list-span1">
                                <li><a href="#">机密</a></li>
                				<li><a href="#">秘密</a></li>
                				<li><a href="#">内部</a></li>
                				<li><a href="#">公开</a></li>
                                 <li><a href="#">机密</a></li>
                				<li><a href="#">秘密</a></li>
                				<li><a href="#">内部</a></li>
                				<li><a href="#">公开</a></li>
                            </ul>
                        </div>    
                 		
                 		<footer></footer>
                        
           		    	<div class="divider"></div>
                        
                        
            		</div>
                        
                    </ul>
                </div>
            
            </div>
            
            <div class="panel panel-bordered panel-condensed">
            	<header><h3>QUICK NAV LIST</h3></header>
                <div class="pcontent bg-height ">
                		<dl class="list ">
                        	<dt>年度</dt>
                            <dd><a href="#">2003</a></dd>
                            <dd><a href="#">2004</a></dd>
                            <dd class="active"><a href="#">2005</a></dd>
                            <dd><a href="#">2006</a></dd>
                            <dd><a href="#">2007</a></dd>
                        </dl>
                        
                        
                        <dl class="list">
                        	<dt>保管期限</dt>
                            <dd><a href="#">长期</a></dd>
                            <dd><a href="#">永久</a></dd>
                            <dd><a href="#">短期</a></dd>
                            <dd class="active"><a href="#">10年</a></dd>
                            <dd><a href="#">30年</a></dd>
                        </dl>
                       
                      
                                              
                </div>
                <footer></footer>
            </div>
             <div class="box-shadow-large margin20-b">
                	<div class="shadow-left"></div>
                	<div class="shadow-right"></div>
        	 </div>

       
       </section> 
       
       <section class="iconLists">
       		<h2 class="page-header">图标列表</h2>
                         
             
            
       		<div class="row">
            
                
                <div class="span12">
                	
                	<div class="panel panel-bordered margin10-b bg-silver-anti ">
                        <header><h3>ICON </h3></header>
                        <div class="pcontent">
                           <ul class="list-icon">
                            <li><a href="#"><img src="img/demo/ico/48/nav_photostream_icon.png" /><div>应用</div></a></li>
                            <li><a href="#"><img src="img/demo/ico/48/nav_icon_safari.png"/><div>互联网</div></a></li>
                            <li><a href="#"><img  src="img/demo/ico/48/overview_calendar_icon.jpg"/><div>日历</div></a></li>
                            <li><a href="#"><img   src="img/demo/ico/48/ibooks_icon copy.jpg"/><div>图书</div></a></li>
                            <li><a href="#"><img  src="img/demo/ico/48/nav_documents_icon.png" /><div>文稿</div></a></li>
                            <li><a href="#"><img src="img/demo/ico/48/icon_1.png"/><div>日志</div></a></li>
                            <li><a href="#"><img src="img/demo/ico/48/icon_2.png"/><div>互联网</div></a></li>
                            <li><a href="#"><img  src="img/demo/ico/48/icon_3.png"/><div>日历</div></a></li>
                            <li><a href="#"><img   src="img/demo/ico/48/icon_4.png"/><div>图书</div></a></li>
                            <li><a href="#"><img  src="img/demo/ico/48/icon_5.png" /><div>文稿</div></a></li>
                           </ul>
                               
                        </div>
                         <footer></footer>
               	  </div>
                  
                  
               <div class="panel panel-bordered bg-silver-anti margin10-b">
        			<header><h3>WIDE ICON </h3></header>
                
                	<div class="pcontent">
                		<ul class="list-icon list-wide">
                            <li><a href="#"><img src="img/demo/ico/48/nav_photostream_icon.png" /><div>应用</div></a></li>
                            <li><a href="#"><img src="img/demo/ico/48/nav_icon_safari.png"/><div>互联网</div></a></li>
                            <li><a href="#"><img  src="img/demo/ico/48/overview_calendar_icon.jpg"/><div>日历</div></a></li>
                            <li><a href="#"><img   src="img/demo/ico/48/ibooks_icon copy.jpg"/><div>图书</div></a></li>
                            <li><a href="#"><img  src="img/demo/ico/48/icon_3.png" /><div>文稿</div></a></li>
                            <li><a href="#"><img src="img/demo/ico/48/icon_2.png"/><div>日志</div></a></li>
                            <li><a href="#"><img src="img/demo/ico/48/icon_4.png"/><div>互联网</div></a></li>                            
                        </ul>
                        
               	   </div>
                <footer></footer>
              </div>
              
              <div class="panel bg-silver-anti panel-bordered panel-condensed margin10-b">	
                        <header class="phead">
                                <h3>DETAIL ICON LIST</h3>
                                
                        </header>
                        
                      	<div class="pcontent">
                                        <ul class="list-icon list-detail ">
                                                <li><a href="#"><img src="img/demo/ico/48/nav_photostream_icon.png" /></a><div><h5><a href="#">应用</a></h5><p>应用的说明，这里是应用的说明...</p></div></li>
                                                <li><a href="#"><img src="img/demo/ico/48/nav_icon_safari.png"/></a><div><h5><a href="#">互联网</a></h5><p>互联网的说明，这里是互联网的说明...</p></div></li>
                                                <li><a href="#"><img  src="img/demo/ico/48/overview_calendar_icon.jpg"/></a><div><h5><a href="#">日历</a></h5><p>这里是互联网的说明...</p></div></li>
                                                <li><a href="#"><img   src="img/demo/ico/48/icon_1.png"/></a><div><h5><a href="#">图书</a></h5><p>这里是图书的说明,更多说明更多说明更多说明，这里是图书的说明...</p></div></li>
                                                <li><a href="#"><img  src="img/demo/ico/48/icon_2.png" /></a><div><h5><a href="#">文稿</a></h5><p>文稿说明，这里是文稿的说明...</p></div></li>
                                                <li><a href="#"><img src="img/demo/ico/48/icon_3.png"/></a><div><h5><a href="#">日志</a></h5><p>日志的说明...	</p></div></li> 
                                        </ul>
                                       
                        </div>
                        
              			<footer></footer>         
              </div>
              
               <div class="panel panel-bordered bg-silver-anti margin10-b">
        			<header><h3>LARGE ICON </h3></header>
                
                	<div class="pcontent">
                		<ul class="list-icon list-large ">
                           <li><a href="#"><img src="img/demo/ico/96/Address-Book.png" /><div>图书</div></a></li>
                           <li><a href="#"><img src="img/demo/ico/96/Edit.png"/><div>编辑</div></a></li>
                           <li><a href="#"><img src="img/demo/ico/96/Organize.png"/><div>组织</div></a></li>
                           <li><a href="#"><img src="img/demo/ico/96/Package.png"/><div>归档</div></a></li>
                           
                        </ul>
               	   </div>
                <footer></footer>
              </div>
              
              <div class="panel panel-bordered bg-silver-anti margin10-b">
        			<header><h3>LARGE ICON </h3></header>
                
                	<div class="pcontent">
                		<ul class="list-icon list-large list-wide ">
                             <li><a href="#"><img src="img/demo/ico/96/Address-Book.png" /><div>图书</div></a></li>
                             <li><a href="#"><img src="img/demo/ico/96/Edit.png"/><div>编辑</div></a></li>
                             <li><a href="#"><img src="img/demo/ico/96/Organize.png"/><div>组织</div></a></li> 
                        </ul>
               	   </div>
                <footer></footer>
              </div>
              
              
                <div class="panel panel-bordered bg-silver-anti margin10-b">	
                    <header>
                            <h3>LARGE DETAIL ICON LIST</h3>
                            
                    </header>
                    
                  <div class="pcontent">
                                    <ul class="list-icon list-large list-detail">
                                             <li><a href="#"><img src="img/demo/ico/96/Address-Book.png" /></a><div><h5><a href="#">应用</a></h5><p>应用的说明，这里是应用的说明...</p><p>&nbsp;</p><p><a href="#" class="orange">链接</a> | <a href="#" class="orange">链接</a></p></div></li>
                                            <li class="box pad10 bg-silver round"><a href="#"><img src="img/demo/ico/96/Edit.png"/></a><div><h5><a href="#">互联网</a></h5><p>互联网的说明，这里是互联网的说明...</p><p>&nbsp;</p><p><a class="btn btn-small" href="#"> 按钮 </a></p></div></li>
                                            <li><a href="#"><img src="img/demo/ico/96/Organize.png"/></a><div><h5><a href="#">日历</a></h5><p>这里是互联网的说明...</p></div></li>
                                            <li><a href="#"><img src="img/demo/ico/96/Package.png"/></a><div><h5><a href="#">图书</a></h5><p>这里是图书的说明,更多说明更多说明更多说明，这里是图书的说明..</p></div></li>
                                    </ul>
                    </div>	
                    <footer></footer>
                   
                </div>
                
                <div class="panel panel-bordered  margin10-b">	
                    <header>
                            <h2>TABLE 布局<small>尽量不要用table布局，无法响应移动设备不同尺寸的浏览器</small></h2>
                            
                    </header>
                    
                  <div class="pcontent">
                       <table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
                     	<tr>
                        	<td align="center" style="padding-left:120px;"><div class="item-icon"><a href="#"><img src="img/demo/ico/48/nav_photostream_icon.png" /><div>应用</div></a></div></td>
                            <td align="center" style="padding-left:120px;"><div class="item-icon item-wide"><a href="#"><img  src="img/demo/ico/48/overview_calendar_icon.jpg"/><div>日历</div></a></div></td>
                            
                            <td align="center">
                            	<div class="item-icon item-detail">
                                	<a href="#"><img  src="img/demo/ico/48/nav_documents_icon.png" /></a>
                                     
                                     <h5><a href="#">文稿</a></h5>
                                     <p>文稿说明，这里是文稿的说明...</p>
                                     
                                </div>
                                
                            </td>
                        </tr>	
                     </table> 
                     
                     <div class=" margin20-b"></div>
                     
                     <!-- <table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
                     	<tr>
                        	<td style="padding-left:120px;"> <div class="item-icon item-large"><a href="#"><img src="img/demo/ico/96/Address-Book.png" /><div>应用</div></a></div></td>
                            <td style="padding-left:120px;"><div class="item-icon item-large item-wide"><a href="#"><img src="img/demo/ico/96/Edit.png"/><div>日历</div></a></div></td>
                            
                            <td style="padding-right:50px;">
                            
                                <div class="item-icon item-large item-detail">
                                    	<a href="#"><img src="img/demo/ico/96/Package.png"/></a>
                                    <div>
                                    	<h5><a href="#">文稿</a></h5>
                                    	<p>这里是图书的说明,更多说明更多说明更多说明，这里是图书的说明..</p>
                                	</div>
                                	<br class="clearfix"/>
                                </div>
                            </td>
                        </tr>

                     </table>-->
                     
                    </div>	
                    <footer></footer>
                    
                   
                </div> 
              
              
              
            </div>
          </div>
       
       </section>
       
       <section class="titledVlist">
       		<h2 class="page-header">带标题的列表</h2>
       		<div class="row">
            	
            	<div class="span2">
                	<dl class="vlist">
            			<dt><a href="#">新手上路</a></dt>
                		<dd><a href="#">新手学堂</a></dd>
                		<dd><a href="#">服务中心</a></dd>
                		<dd><a href="#">新手体验专区</a></dd>
            		</dl>
                </div>
                <div class="span2">
                	<dl class="vlist">
            			<dt><a href="#">新手上路</a></dt>
                		<dd><a href="#">新手学堂</a></dd>
                		<dd><a href="#">服务中心</a></dd>
                		<dd><a href="#">新手体验专区</a></dd>
            		</dl>
                </div>
                <div class="span2">
                	<dl class="vlist">
            			<dt><a href="#">新手上路</a></dt>
                		<dd><a href="#">新手学堂</a></dd>
                		<dd><a href="#">服务中心</a></dd>
                		<dd><a href="#">新手体验专区</a></dd>
            		</dl>
                </div>
                <div class="span2">
                	<dl class="vlist">
            			<dt><a href="#">新手上路</a></dt>
                		<dd><a href="#">新手学堂</a></dd>
                		<dd><a href="#">服务中心</a></dd>
                		<dd><a href="#">新手体验专区</a></dd>
            		</dl>
                </div>
                <div class="span2">
                	<dl class="vlist">
            			<dt><a href="#">新手上路</a></dt>
                		<dd><a href="#">新手学堂</a></dd>
                		<dd><a href="#">服务中心</a></dd>
                		<dd><a href="#">新手体验专区</a></dd>
            		</dl>
                </div>
                <div class="span2">
                	<dl class="vlist">
            			<dt><a href="#">新手上路</a></dt>
                		<dd><a href="#">新手学堂</a></dd>
                		<dd><a href="#">服务中心</a></dd>
                		<dd><a href="#">新手体验专区</a></dd>
            		</dl>
                </div>
            </div>
       </section>
    
    
    <div class="margin20-b">&nbsp;</div>
    
    <footer style="margin:40px 0 50px 0;padding:20px 0;border-top:1px solid #e5e5e5;">
    	<p class="pull-right"><a href="#">返回顶端</a></p>
        <p><a href="http://code.google.com/webui-framework">WebUI Framework 2.0</a> Designed For Developers Thanks For Twitter Bootstrap Framework </p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a></p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
    </footer>
    
    
  </div>   
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/prettify.js"></script>
    <script type="text/javascript" src="js/dataTables.js"></script>
    <script type="text/javascript" src="js/dataTables.paging.js"></script>
    
    <script type="text/javascript">
    	
		$(function(){
			prettyPrint();
	
		});
    
    </script>
    
</body>
</html>
 